<template>
    <el-dialog v-if="isDialog" v-model="dialogVisible" title="方案详细信息" width="40%">
        <el-form :model="repaymentModel" label-width="120px" style="padding-right: 30px">
            <el-form-item label="还款规则类型" prop="ruleType">
                <el-radio-group v-model="repaymentModel.ruleType" :disabled="!enableTOEidt">
                    <el-radio :label="0">一次还清</el-radio>
                    <el-radio :label="1">等额分期</el-radio>
                    <el-radio :label="2">阶段还款</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="还款规则名称" prop="ruleName">
                <el-input v-model="repaymentModel.ruleName" :disabled="!enableTOEidt"></el-input>
            </el-form-item>
            <template v-if="repaymentModel.ruleType != 2">
                <el-form-item label="本金占比" prop="principalRatio">
                    <el-input-number :min="0" v-model="repaymentModel.principalRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="利息占比" prop="interestRatio">
                    <el-input-number :min="0" v-model="repaymentModel.interestRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                    <el-input-number :min="0" v-model="repaymentModel.lateFeeRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="违约金占比" prop="damageRatio">
                    <el-input-number :min="0" v-model="repaymentModel.damageRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="罚息占比" prop="defaultInterestRatio">
                    <el-input-number :min="0" v-model="repaymentModel.defaultInterestRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                    <el-input-number :min="0" v-model="repaymentModel.otherAmountsRatio" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="还款时间" prop="repaymentTime">
                    <el-input-number :min="0" v-model="repaymentModel.repaymentTime" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>天</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="分期次数" prop="numberOfInstallments">
                    <el-input-number :min="0" v-model="repaymentModel.numberOfInstallments" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>次</span>
                        </template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="手续费" prop="commission">
                    <el-input-number :min="0" v-model="repaymentModel.commission" :disabled="!enableTOEidt"
                        controls-position="right">
                        <template #suffix>
                            <span>元</span>
                        </template>
                    </el-input-number>
                </el-form-item>
            </template>
            <template v-if="repaymentModel.ruleType === 2">
                <div class="stage-wrapper">
                    <div v-for="(stageRepayment, index) in repaymentModel.stageRepayments" :key="index">
                        <div class="stage-repayment">
                            <div class="stage-repayment-header">
                                <div>第{{ index + 1 }}期</div>
                                <div v-if="enableTOEidt">
                                    <el-button @click="deleteStage(index)" v-if="index !== 0">删除</el-button>
                                    <el-button @click="addStage(index)"
                                        v-if="index === repaymentModel.stageRepayments.length - 1">添加</el-button>
                                </div>
                            </div>
                            <div class="stage-repayment-footer">
                                <el-form-item label="本金占比" prop="principalRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.principalRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="利息占比" prop="interestRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.interestRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.lateFeeRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="违约金占比" prop="damageRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.damageRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="罚息占比" prop="defaultInterestRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.defaultInterestRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                                    <el-input-number :min="0" v-model="stageRepayment.otherAmountsRatio"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>%</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="还款时间" prop="repaymentTime">
                                    <el-input-number :min="0" v-model="stageRepayment.repaymentTime"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>天</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                                <el-form-item label="手续费" prop="commission">
                                    <el-input-number :min="0" v-model="stageRepayment.commission"
                                        :disabled="!enableTOEidt" controls-position="right">
                                        <template #suffix>
                                            <span>元</span>
                                        </template>
                                    </el-input-number>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancle">关闭</el-button>
                <el-button type="primary" v-if="enableTOEidt" @click="saveRepayment()"> 提交 </el-button>
            </span>
        </template>
    </el-dialog>

    <el-form v-if="!isDialog" :model="repaymentModel" label-width="120px" style="padding-right: 30px">
        <el-form-item label="还款规则类型" prop="ruleType">
            <el-radio-group v-model="repaymentModel.ruleType" :disabled="!enableTOEidt">
                <el-radio :label="0">一次还清</el-radio>
                <el-radio :label="1">等额分期</el-radio>
                <el-radio :label="2">阶段还款</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="还款规则名称" prop="ruleName">
            <el-input v-model="repaymentModel.ruleName" :disabled="!enableTOEidt"></el-input>
        </el-form-item>
        <template v-if="repaymentModel.ruleType != 2">
            <el-form-item label="本金占比" prop="principalRatio">
                <el-input-number :min="0" v-model="repaymentModel.principalRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="利息占比" prop="interestRatio">
                <el-input-number :min="0" v-model="repaymentModel.interestRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                <el-input-number :min="0" v-model="repaymentModel.lateFeeRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="违约金占比" prop="damageRatio">
                <el-input-number :min="0" v-model="repaymentModel.damageRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="罚息占比" prop="defaultInterestRatio">
                <el-input-number :min="0" v-model="repaymentModel.defaultInterestRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                <el-input-number :min="0" v-model="repaymentModel.otherAmountsRatio" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>%</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="还款时间" prop="repaymentTime">
                <el-input-number :min="0" v-model="repaymentModel.repaymentTime" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>天</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="分期次数" prop="numberOfInstallments">
                <el-input-number :min="0" v-model="repaymentModel.numberOfInstallments" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>次</span>
                    </template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="手续费" prop="commission">
                <el-input-number :min="0" v-model="repaymentModel.commission" :disabled="!enableTOEidt"
                    controls-position="right">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </el-form-item>
        </template>
        <template v-if="repaymentModel.ruleType === 2">
            <div class="stage-wrapper">
                <div v-for="(stageRepayment, index) in repaymentModel.stageRepayments" :key="index">
                    <div class="stage-repayment">
                        <div class="stage-repayment-header">
                            <div>第{{ index + 1 }}期</div>
                            <div v-if="enableTOEidt">
                                <el-button @click="deleteStage(index)" v-if="index !== 0">删除</el-button>
                                <el-button @click="addStage(index)"
                                    v-if="index === repaymentModel.stageRepayments.length - 1">添加</el-button>
                            </div>
                        </div>
                        <div class="stage-repayment-footer">
                            <el-form-item label="本金占比" prop="principalRatio">
                                <el-input-number :min="0" v-model="stageRepayment.principalRatio"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="利息占比" prop="interestRatio">
                                <el-input-number :min="0" v-model="stageRepayment.interestRatio"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                                <el-input-number :min="0" v-model="stageRepayment.lateFeeRatio"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="违约金占比" prop="damageRatio">
                                <el-input-number :min="0" v-model="stageRepayment.damageRatio" :disabled="!enableTOEidt"
                                    controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="罚息占比" prop="defaultInterestRatio">
                                <el-input-number :min="0" v-model="stageRepayment.defaultInterestRatio"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                                <el-input-number :min="0" v-model="stageRepayment.otherAmountsRatio"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>%</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="还款时间" prop="repaymentTime">
                                <el-input-number :min="0" v-model="stageRepayment.repaymentTime"
                                    :disabled="!enableTOEidt" controls-position="right">
                                    <template #suffix>
                                        <span>天</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="手续费" prop="commission">
                                <el-input-number :min="0" v-model="stageRepayment.commission" :disabled="!enableTOEidt"
                                    controls-position="right">
                                    <template #suffix>
                                        <span>元</span>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancle">关闭</el-button>
                <el-button type="primary" v-if="enableTOEidt" @click="saveRepayment()"> 提交 </el-button>
            </span>
        </template>
    </el-form>

</template>

<script lang="ts" setup>
import Repayment from '@/types/response/repayment';
import StageRepayment from '@/types/response/stageRepayment';
import { reactive, ref } from 'vue';
import { modifyRepaymentPlan } from '@/axios/case/repaymentReq'
import Notice from '@/utils/notice';
let props = defineProps({
    isDialog: {
        type: Boolean,
        default: true,
    },
    repaymentModel: Repayment,
    enableTOEidt: {
        type: Boolean,
        default: false,
    },

});
let dialogVisible = defineModel<boolean>()

const saveRepayment = async () => {
    try {
        const data: Repayment = await modifyRepaymentPlan(props.repaymentModel);
        dialogVisible.value = false;
        // 更新 tableData 中对应的数据项
        Notice.success('修改成功')
    } catch (error) {
        console.error('修改还款计划失败', error)
        Notice.error('修改还款计划失败')
    }
}
const deleteStage = (index) => {
    if (index != 0) {
        for (let i = index + 1; i < props.repaymentModel.stageRepayments.length; i++) {
            props.repaymentModel.stageRepayments[i].order--
        }
        props.repaymentModel.stageRepayments.splice(index, 1)
    }
}
const addStage = (index) => {
    let stage = reactive(new StageRepayment())
    stage.repaymentId = props.repaymentModel.repaymentId
    stage.order = index + 1
    stage.principalRatio = 0
    stage.interestRatio = 0
    stage.lateFeeRatio = 0
    stage.damageRatio = 0
    stage.defaultInterestRatio = 0
    stage.otherAmountsRatio = 0
    stage.repaymentTime = 0
    stage.commission = 0
    props.repaymentModel.stageRepayments.push(stage)
}
const cancle = () => {
    dialogVisible.value = false
}
</script>

<style>
.el-button {
    margin-right: 10px;
}

.stage-repayment {
    width: 90%;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    margin: 20px auto;
}

.stage-repayment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
}

.stage-repayment-footer {
    padding-right: 15px;
}
</style>